<template>
    <div>
      <h2>学生管理</h2>
      <form @submit.prevent="addStudent">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="newStudent.name" required>
        <br>
        <label for="gender">性别:</label>
        <select id="gender" v-model="newStudent.gender" required>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
        <br>
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model="newStudent.age" required min="1" max="100">
        <br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="newStudent.email" required>
        <br>
        <label for="phone">电话号码:</label>
        <input type="text" id="phone" v-model="newStudent.phone" required pattern="[0-9]{11}">
        <br>
        <label for="qq">QQ号码:</label>
        <input type="text" id="qq" v-model="newStudent.qq" required pattern="[1-9][0-9]{4,}">
        <br>
        <button type="submit">添加学生</button>
        <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
      </form>
      <ul>
        <li v-for="(student, index) in students" :key="index">
          姓名: {{ student.name }}, 性别: {{ student.gender }}, 年龄: {{ student.age }}, 邮箱: {{ student.email }}, 电话: {{ student.phone }}, QQ: {{ student.qq }}
          <button @click="deleteStudent(index)">删除</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newStudent: {
          name: '',
          gender: '',
          age: 0,
          email: '',
          phone: '',
          qq: ''
        },
        students: [
          { name: '张三', gender: '男', age: 18, email: 'zhangsan@example.com', phone: '13821134666', qq: '123456789' },
          { name: '李四', gender: '女', age: 20, email: 'lisi@example.com', phone: '13434765987', qq: '987654321' }
        ],
        errorMessage: ''
      };
    },
    methods: {
      addStudent() {
        if (!this.newStudent.name.trim()) {
          this.errorMessage = '姓名不能为空';
          return;
        }
        if (!this.newStudent.gender) {
          this.errorMessage = '性别不能为空';
          return;
        }
        if (this.newStudent.age < 1 || this.newStudent.age > 100) {
          this.errorMessage = '年龄必须在1到100之间';
          return;
        }
        const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        if (!emailRegex.test(this.newStudent.email)) {
          this.errorMessage = '邮箱格式不正确';
          return;
        }
        if (!this.newStudent.phone.match(/^[0-9]{11}$/)) {
          this.errorMessage = '电话号码必须为11位数字';
          return;
        }
        if (!this.newStudent.qq.match(/^[1-9][0-9]{4,}$/)) {
          this.errorMessage = 'QQ号码格式不正确，需为5位及以上数字且首位不为0';
          return;
        }
        this.students.push({...this.newStudent });
        this.newStudent.name = '';
        this.newStudent.gender = '';
        this.newStudent.age = 0;
        this.newStudent.email = '';
        this.newStudent.phone = '';
        this.newStudent.qq = '';
        this.errorMessage = '';
      },
      deleteStudent(index) {
        this.students.splice(index, 1);
      }
    }
  };
  </script>
  
  <style scoped>
  li {
    list-style-type: none;
    margin: 5px;
  }
  
  button {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #cc0000;
  }
  </style>